﻿@using Media.Core.Helpers.Main;
@model List<Media.Core.Models.Tv.TvDirectories>
@{
    ViewBag.Title = "Your Shows";
}

<h2>Your Shows<img id="LoadingGif" src="../../Content/images/loadera64.gif" style="margin-left: 20px;width:20px;height:20px;display:none;"/></h2>

<div style="float:right;margin-right:20px;margin-top:-40px;">
        <b>Current Tv Show Directory:</b>
        @GetDirectory.UserLocation("Tv Shows", Membership.GetUser().ProviderUserKey.ToString())
        <button style="float:left;margin-top:-5px;margin-right:10px;" onclick="inserttv();">Update Tv Shows</button>
</div>

<style>
    /**********************************************
    Tiling Banners on Index
**********************************************/
		
#TilingSeasonBanners ul 
{
	list-style: none;
	margin: 0; 
	width: 100%;
	text-align:center;
}
#TilingSeasonBanners ul li 
{
	margin: 0; 
	padding-left: 18px;
	padding-right:18px;
	padding-top: 17px;
	float: left;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 370px;
	height: 84px;
}
#TilingSeasonBanners ul li div  
{
	width: 100px; height: 100px; /* Set the small thumbnail size */
	-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
	/*border: 1px solid #ddd;*/
	padding: 5px;
	/*background: #f0f0f0;*/
	left: 0; top: 0;
}
#TilingSeasonBanners ul li div.hover 
{
 /* Image used as background on hover effect
	border: none; /* Get rid of border on hover */
}
    
</style>
<script type="text/javascript">

    $("#TvNav").addClass("current");

</script>

<br />
<div class="grid_X">
    <div class="box">
        <div class="header">
            <h3>Shows</h3>
        </div>
        <div class="content" style="background:#E8EAEF;">
        <br />
            <div id="TilingSeasonBanners" style="text-align:center;">
                <ul>
                    @for (int i = 0; i < Model.Count; i++)
                    {
                        <li>
                            <div style="width:325px;display:inline-block;">
                                <img style="height:60px; width:325px; margin-bottom: -3px; cursor:pointer;" 
                                    src="@(GetDirectory.Location("Tv Banners") + Model[i].BannerImage)" 
                                    onclick="LoadDetails(@Model[i].Id)" />
                                    <div style="width:305px;height:16px;">
                                        <b>Rating:</b> @Model[i].Rating
                                        <b>Episodes:</b> @Model[i].Episodes
                                        <b>You Have:</b> @Model[i].YourEpisodes
                                    </div>
                            </div>
                        </li>
                    }
                </ul>
            </div>
            <br />
        </div>
    </div>
</div>


<script type="text/javascript">
    function inserttv() {
        document.getElementById('LoadingGif').style.display = 'inline-block';
        $.getJSON('@Url.Content("~/Tv/Search")',
        function (data) {
            document.getElementById('LoadingGif').style.display = 'none';
            alert("Success");
        });
    }

    function LoadDetails(Id) {
        window.location = '/Tv/Details/' + Id;
    }
</script>

<!-- Hover Over Image Expand Script -->
<script type="text/javascript">

    $("#TilingSeasonBanners ul li").hover(function () {
        $(this).css({ 'z-index': '10' }); /*Add a higher z-index value so this image stays on top*/
        $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
		.animate({
		    marginTop: '-20px', /* The next 4 lines will vertically align this image */
		    marginLeft: '-20px',
		    width: '370px', /* Set new width */
		    height: '80px'/* Set new height */
		}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

    }, function () {
        $(this).css({ 'z-index': '0' }); /* Set z-index back to 0 */
        $(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
		.animate({
		    marginTop: '0px', /* Set alignment back to default */
		    marginLeft: '0px',
		    width: '325px', /* Set width back to default */
		    height: '60px' /* Set height back to default */
		}, 400);
    });

</script>